<!--
  管理员侧边栏组件
  创建时间：2025-09-12
  作者：开发团队
  目的：提供管理员功能导航菜单
-->

<template>
  <div class="admin-sidebar">
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical"
      @select="handleMenuSelect"
    >
      <el-menu-item index="statistics">
        <el-icon><TrendCharts /></el-icon>
        <span>统计分析</span>
      </el-menu-item>
      <el-menu-item index="keys">
        <el-icon><Key /></el-icon>
        <span>密钥管理</span>
      </el-menu-item>
      <el-menu-item index="visitors">
        <el-icon><UserFilled /></el-icon>
        <span>特殊访客</span>
      </el-menu-item>
      <el-menu-item index="audit">
        <el-icon><Document /></el-icon>
        <span>审计日志</span>
      </el-menu-item>
      <el-menu-item index="guards">
        <el-icon><Avatar /></el-icon>
        <span>门卫管理</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { TrendCharts, Key, UserFilled, Document, Avatar } from '@element-plus/icons-vue'
import type { PropType } from 'vue'

// 定义Props
defineProps({
  activeMenu: {
    type: String as PropType<string>,
    default: 'statistics'
  }
})

// 定义Emits
const emit = defineEmits<{
  (e: 'menu-select', menu: string): void
}>()

/**
 * 处理菜单选择
 * :param menu: 选中的菜单项
 */
const handleMenuSelect = (menu: string): void => {
  emit('menu-select', menu)
}
</script>

<style scoped>
.admin-sidebar {
  height: 100%;
  border-right: 1px solid var(--el-border-color-light);
}

.el-menu-vertical {
  border: none;
  height: 100%;
}

.el-menu-item {
  height: 56px;
  line-height: 56px;
  font-size: 14px;
}

.el-menu-item .el-icon {
  margin-right: 8px;
  width: 16px;
  height: 16px;
}
</style>